<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>snap</title>
</head>
<body>
  <h3>Element/paper</h3>
  <p>通过Snap(width, height)创建一个svg画布，返回一个对象，通过dom的appendChild将其添加到DOM中</p>
  <p>通过paper属性中的circle、ellipse、line、polygon等方法，可以绘制出各种图形</p>
  <div id="element"></div>
  <h3>Element/dom</h3>
  <p>通过paper.path，可以绘制多种类型的线段（椭圆弧线、直线、贝塞尔曲线）</p>
  <div id="ele-dom"></div>
  <h3>Element/event</h3>
  <div id="ele-event"></div>
</body>

<script src="./snap.svg-min.js"></script>
<script>

  // 测试基本功能
  const element = document.getElementById("element")
  let svg = Snap(500, 200);
  let c1 = svg.paper.circle(100,100,20)
  c1.attr({
    fill: "red"
  })
  let l = svg.paper.line(30,30,30,60).attr({
    stroke: "blue",
    strokeWidth: 5
  })
  let r = svg.paper.rect(50, 50, 20, 30).attr({
    fill: "green"
  })
  
  element.appendChild(svg.node);

  // dom相关
  const elDom = document.getElementById("ele-dom")
  let svg2 = Snap(500, 200)

  svg2.paper.path("M10 10L50 50Z").attr({
    stroke: "red",
    strokeWidth: 3
  })
  svg2.paper.path("M50 10H100 Z").attr({
    stroke: "blue",
    strokeWidth: 3
  })
  svg2.paper.path("M50 30C160 40, 70 150, 280 160").attr({
    stroke: "green",
    strokeWidth: 3,
    fill: "none"
  })
  svg2.paper.path("M100 30S180 40,220 100").attr({
    stroke: "brown",
    strokeWidth: 3,
    fill: "none"
  })
  svg2.paper.path("M200 50Q220 120,300 100M300 100Q400 0,500, 100").attr({
    stroke: "cyan",
    strokeWidth: 3,
    fill: "none"
  })
  elDom.appendChild(svg2.node)



</script>
</html>